<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        placeholder="搜索内容"
        style="width: 200px;"
        class="filter-item"
        clearable
        v-model="listQuery.query.searchContent"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.query.state"
        placeholder="资产状态"
        clearable
        style="width: 120px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in assetOptionState"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="listQuery.query.neaten_flow"
        placeholder="资产审批状态"
        clearable
        style="width: 160px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in assetOptionNeaten"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        prefix-icon="el-icon-search"
        @click="handleFilter"
      >搜 索</el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加行</el-button>
      <!-- <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleColumn"
      >添加列</el-button>-->
      <el-button
        v-waves
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >导出</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="handleUpload">电子档案</el-button>
      <!-- <el-button v-waves class="filter-item" type="primary" @click="handleScreen">筛选</el-button> -->
      <el-button v-waves class="filter-item" type="primary" @click="handleRentDialog">出租</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="notarizeRelet">续租</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="handleBooked">资产入账</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="handleOutBooked">资产出账</el-button>
      <el-popover placement="bottom-start" width="400" trigger="click">
        <el-row>
          <el-col :span="8">
            <el-button v-waves class="filter-item" type="success" icon="el-icon-upload">上传附件</el-button>
          </el-col>
        </el-row>
        <svg-icon
          slot="reference"
          style="width:2em;height:2em;radius:1em;border-radius: 4px"
          icon-class="menu"
        />
      </el-popover>
    </div>
    <el-row style="margin-bottom:10px">
      <el-tag
        v-for="tag in allGroups"
        :key="tag.name"
        effect="dark"
        size="medium"
        closable
        :type="tag.type"
        @close="handleTagClose(tag)"
        @click="handleTagClick(tag)"
      >{{tag.name}}</el-tag>
    </el-row>
    <!-- 右键菜单 -->
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item @click="cancelCollection" v-if="contextItemShow">取消收藏</v-contextmenu-item>
      <v-contextmenu-submenu v-else @submenu-show="handleSubmenuShow">
        <i class="el-icon-star-off" slot="title">收藏进我的分组</i>
        <v-contextmenu-item @click="addGroup">添加新分组</v-contextmenu-item>
        <v-contextmenu-item divider></v-contextmenu-item>
        <v-contextmenu-item
          v-for="item in allGroups"
          :key="item.guid"
          @click="handleItemGroup(item)"
        >{{item.name}}</v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-item @click="delSelectionRow">
        <i class="el-icon-delete">多行删除</i>
      </v-contextmenu-item>
    </v-contextmenu>
    <!-- 表格 -->
    <div v-contextmenu:contextmenu>
      <el-table
        v-loading="listLoading"
        :data.sync="rowContent"
        element-loading-text="Loading"
        border=""
        stripe
        highlight-current-row
        ref="multipletable"
        @selection-change="handleChange"
        @row-contextmenu="rowContextMenu"
        :header-cell-style="{'background-color': '#f1f2f6' }"
      >
        <el-table-column width="55" type="index" :render-header="renderHeader"></el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column label="资产详情" align="center"> -->
        <el-table-column width="120" align="center" label="资产编号">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-input-number v-model="scope.row.num"/>
            </template>
            <span v-else>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="120" label="资产地址">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-input v-model="scope.row.address"/>
            </template>
            <span class="link-type" @click="handleDetail(scope.row.guid)" v-else>
              {{ scope.row.address }}
              <!-- <i class="el-icon-view el-icon--right"></i> -->
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="120" label="资产面积(平方)">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-input placeholder="请输入内容" v-model="scope.row.build_area">
                <!-- <template slot="append">
                      m
                      <sup>2</sup>
                </template>-->
              </el-input>
            </template>
            <span v-else>{{ scope.row.build_area|numFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="资产类型" width="120" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-select v-model="scope.row.room_property">
                <el-option
                  v-for="item in assetRoomProperty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
            <span v-else>{{ assetRoomPropertyFilter[scope.row.room_property] }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" align="center" label="区域">
          <template slot-scope="scope">
            <!-- <el-form :model="scope.row" ref="scope.row"> -->
            <template v-if="scope.row.temp_edit">
              <!-- <el-form-item prop="region"> -->
              <el-input v-model="scope.row.region"/>
              <!-- </el-form-item> -->
            </template>
            <span v-else>{{ scope.row.region }}</span>
            <!-- </el-form> -->
          </template>
        </el-table-column>
        <el-table-column width="120" align="center" label="管理区域">
          <template slot-scope="scope">
            <!-- <el-form :model="scope.row" ref="scope.row"> -->
            <template v-if="scope.row.temp_edit">
              <!-- <el-form-item prop="manage_region"> -->
              <el-input v-model="scope.row.manage_region"/>
              <!-- </el-form-item> -->
            </template>
            <span v-else>{{ scope.row.manage_region }}</span>
            <!-- </el-form> -->
          </template>
        </el-table-column>
        <!-- </el-table-column> -->
        <el-table-column label="资产状态" width="120" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-select v-model="scope.row.state">
                <el-option
                  v-for="item in assetOptionState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
            <span v-else>{{ assetStateFilter[scope.row.state] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="资产隐患" width="120" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-select v-model="scope.row.hidden">
                <el-option
                  v-for="item in assetOptionHidden"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
            <!-- <span v-else>{{ assetHiddenFilter[scope.row.hidden] }}</span> -->
            <div v-else slot="reference" class="name-wrapper">
              <el-tag
                :type="scope.row.hidden === '0' ? 'primary' :'success'"
                size="medium"
              >{{ assetHiddenFilter[scope.row.hidden] }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="资产审批状态" width="120" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-select v-model="scope.row.neaten_flow">
                <el-option
                  v-for="item in assetOptionNeaten"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
            <span v-else>{{ assetNeatenFilter[scope.row.neaten_flow] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="安全巡查日期" width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-date-picker
                type="date"
                value-format="timestamp"
                v-model="scope.row.hidden_check_date"
              ></el-date-picker>
            </template>
            <span v-else>
              <i class="el-icon-time"></i>
              {{ parseInt(scope.row.hidden_check_date) |timestampToDate('yyyy-MM-dd')}}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="资产巡查日期" width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-date-picker
                type="date"
                value-format="timestamp"
                v-model="scope.row.asset_check_date"
              ></el-date-picker>
            </template>
            <span v-else>
              <i class="el-icon-time"></i>
              {{ parseInt(scope.row.asset_check_date) |timestampToDate('yyyy-MM-dd') }}
            </span>
          </template>
        </el-table-column>
        <!-- 动态列生成 -->
        <el-table-column
          v-for="(item,i) in dynTitle"
          :key="i"
          align="center"
          width="120"
          :label="item.title"
        >
          <!-- :render-header="renderHeader" -->
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-input v-if="item.rowType===1" v-model="scope.row[item.field]"/>
              <el-input-number v-else-if="item.rowType===2" v-model="scope.row[item.field]"/>
              <el-date-picker
                type="date"
                value-format="timestamp"
                v-else-if="item.rowType===3"
                v-model="scope.row[item.field]"
              />
              <el-select v-else-if="item.rowType===4" v-model="scope.row[item.field]">
                <el-option
                  v-for="(itemChild,index) in item.domains"
                  :key="index"
                  :label="itemChild"
                  :value="index"
                ></el-option>
              </el-select>
            </template>
            <span v-else-if="item.rowType===3">
              <i class="el-icon-time"></i>
              {{ parseInt(scope.row[item.field]) |timestampToDate('yyyy-MM-dd')}}
            </span>
            <span v-else-if="item.rowType===4">{{ item.domains[scope.row[item.field]] }}</span>
            <span v-else>{{scope.row[item.field]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          align="center"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.temp_edit">
              <el-button
                size="mini"
                type="text"
                icon="el-icon--check-outline"
                @click="saveRowEvent(scope.row)"
              >保存</el-button>
              <el-button size="mini" type="text" @click="cancelRowEvent(scope.$index,scope.row)">取消</el-button>
            </template>
            <template v-else>
              <el-button
                size="mini"
                type="text"
                @click="scope.row.temp_edit=!scope.row.temp_edit"
              >编辑</el-button>
              <el-button size="mini" type="text" @click="removeRowEvent(scope.row)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <!-- 弹出层 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogTitleVisible" width="30%">
      <el-form
        ref="titleForm"
        :model="TitleForm"
        :rules="rules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="列标题">
          <el-input v-model="TitleForm.title"/>
        </el-form-item>
        <el-form-item label="框类型">
          <el-select
            v-model="TitleForm.rowType"
            @change="selectChange"
            style="width:100%"
            :disabled="InputDisabled"
          >
            <el-option
              v-for="item in selectOptionValue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产类型">
          <el-select v-model="TitleForm.roomType" style="width:100%" :disabled="InputDisabled">
            <el-option
              v-for="item in assetOptionValue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="showSelect"
          v-for="(domain, index) in TitleForm.domains"
          :label="'下拉框' + (index+1)"
          :key="index"
        >
          <el-row v-if="dialogStatus==='create'">
            <el-col :span="21">
              <el-form-item
                :prop="'domains.' + index+'.value'"
                :rules="[{ required: true, message: '参数名不能为空',trigger: 'change'}]"
              >
                <el-input v-model="domain.value"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-col>
          </el-row>
          <el-form-item v-else-if="dialogStatus==='updateOptions'">
            <el-input v-model="TitleForm.domains[index]"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item v-if="this.dialogStatus==='update'&&InputLengthVisible" label="长度限制">
          <el-input v-model="TitleForm.text_length"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button v-if="dialogStatus==='create'" v-show="showSelect" @click="addDomain">新增下拉框值</el-button>
          <el-button
            type="primary"
            @click="dialogStatus==='create'?addTitle():(dialogStatus==='updateOptions'?updateOptionsValue():editTitle())"
          >确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 筛选显示框 -->
    <el-dialog title="上传文件" :visible.sync="dialogScreenVisible">
      <upload-file :selectionGuid="selectionGuid" :rootGuid="rootGuid"></upload-file>
    </el-dialog>
    <!-- 出租弹出框 -->
    <rent-dialog
      :selectionGuid="selectionGuid"
      :assetData="assetData"
      :rentDialogVisible.sync="rentDialogVisible"
      :dialogTitle="dialogTitle"
    ></rent-dialog>
    <!-- 出入账弹出框 -->
    <el-dialog :title="bookedDialogTitle" :visible.sync="bookedDialogVisible">
      <booked-form
        @closeDialog="closeDialog"
        :title="bookedDialogTitle"
        :roomData="selectionRoomData"
        :selectionGuid="selectionGuid"
      ></booked-form>
    </el-dialog>
    <hireRelet :reletData="reletData" :isHireRelet.sync="isHireRelet" title="续租"></hireRelet>
    <right-panel>
      <settings></settings>
    </right-panel>
  </div>
</template>

<script>
import {
  getList,
  addField,
  delField,
  updateFieldName,
  updateRowValue,
  delRowValue,
  insertRowValue,
  updateSelect,
  updateTextLength,
  getChartInfoRoom,
  getAllByCompanyGuid,
  addGroup,
  updageGroupByGuid,
  deleteByGroupGuid,
  addRoomGroup,
  delRoomGroup,
  selectByGroupGuid
} from "@/api/table";
import Pagination from "@/components/Pagination";
import waves from "@/directive/waves"; //水波样式
import SvgIcon from "@/components/SvgIcon";
import { MessageBox, Message } from "element-ui";
import rentDialog from "@/views/table/rentDialog";
import uploadFile from "@/views/upload/uploadFile";
import bookedForm from "@/views/table/bookedForm";
import hireRelet from "@/views/table/hireRelet";
import store from "@/store";
import RightPanel from "@/components/RightPanel";
import Settings from "@/views/layout/components/Settings";

export default {
  components: {
    Pagination,
    rentDialog,
    uploadFile,
    SvgIcon,
    bookedForm,
    hireRelet,
    RightPanel,
    Settings
  },
  directives: { waves }, //水波样式
  filters: {
    numFilter(value) {
      let val = parseFloat(value).toFixed(2);
      if (value > 0) {
        return val;
      } else {
        return "";
      }
    }
  },
  computed: {},
  data() {
    return {
      TitleForm: {
        title: "",
        columnIndex: 0,
        rowType: "",
        roomType: "",
        text_length: "",
        domains: [{ value: "" }]
      },
      assetData: [
        {
          guids: "",
          chartAreas: "",
          address: ""
        }
      ],
      chartInfoParams: { offset: 1, limit: 10 },
      columnShow: true,
      rowModel: {},
      rentDialogVisible: false,
      list: null,
      dynTitle: null, //动态列标题
      fixedTitle: null, //固定列标题
      rowContent: null, //行数据
      listLoading: true,
      addtitle: null,
      columnLabel: null, //动态列名
      columnField: null, //动态列值
      rowGuid: [], //行的guid数组
      selectionGuid: [],
      selectionRoomData: [],
      total: 0,
      InputDisabled: false,
      InputLengthVisible: false,
      showSelect: false,
      downloadLoading: false,
      dialogTitle: "",
      dialogStatus: "",
      dialogFormVisible: false,
      dialogTitleVisible: false,
      dialogScreenVisible: false,
      bookedDialogVisible: false,
      bookedDialogTitle: "",
      isClearActiveFlag: true,
      reletData: [],
      isHireRelet: false,
      rootGuid: "a46015f715a94b7ea3668e6e89b23b16",
      assetStateFilter: [
        "",
        "空置",
        "已出租",
        "可出租",
        "不可出租",
        "已划拨",
        "自用",
        "已出售",
        "已拆迁",
        "已拆除",
        "已灭失"
      ],
      assetHiddenFilter: ["无", "有"],
      assetNeatenFilter: ["", "提交申请", "正在申请", "申请通过"],
      assetRoomPropertyFilter: ["", "营业房", "住宅房", "土地"],
      selectOptionValueFilter: ["", "输入框", "数字框", "日期框", "下拉框"],
      selectOptionValue: [
        { value: "1", label: "输入框" },
        { value: "2", label: "数字框" },
        { value: "3", label: "日期框" },
        { value: "4", label: "下拉框" }
      ],
      assetOptionValue: [
        { value: "1", label: "资产基本属性" },
        { value: "2", label: "产权" },
        { value: "3", label: "经营" }
      ],
      assetOptionState: [
        { value: "1", label: "空置" },
        { value: "2", label: "已出租" },
        { value: "3", label: "可出租" },
        { value: "4", label: "不可出租" },
        { value: "5", label: "已划拨" },
        { value: "6", label: "自用" },
        { value: "7", label: "已出售" },
        { value: "8", label: "已拆迁" },
        { value: "9", label: "已拆除" },
        { value: "10", label: "已灭失" }
      ], //资产状态
      assetOptionHidden: [
        { value: "0", label: "无" },
        { value: "1", label: "有" }
      ], //资产是否存在隐患
      assetOptionNeaten: [
        { value: "1", label: "提交申请" },
        { value: "2", label: "正在申请" },
        { value: "3", label: "申请通过" }
      ], //资产审批状态
      assetRoomProperty: [
        { value: "1", label: "营业房" },
        { value: "2", label: "住宅房" },
        { value: "3", label: "土地" }
      ],
      fixedColumnTitle: [""],
      listQuery: {
        page: 1,
        limit: 10,
        groupGuid: "",
        query: { searchContent: "", state: "", neaten_flow: "" }
      },
      textMap: {
        update: "编辑列标题",
        create: "添加列标题",
        updateOptions: "修改下拉项值"
      },
      selectionData: [],
      contextItemShow: false,
      inputValue: "",
      allGroups: [],
      rules: {
        //校验
        region: {
          type: "string",
          required: true,
          message: "不能为空",
          trigger: "change"
        },
        manage_region: {
          type: "string",
          required: true,
          message: "不能为空",
          trigger: "change"
        },
        options: {
          type: "string",
          required: true,
          message: "不能为空",
          trigger: "blur"
        }
      }
    };
  },
  created() {
    this.fetchData();
    this.fetchGroupData();
  },
  methods: {
    //获取表格数据
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery)
        .then(response => {
          this.list = response.body;
          this.dynTitle = response.body.dynTitle;
          this.fixedTitle = response.body.fixedTitle;
          this.rowContent = response.body.rows;
          this.total = response.body.total;

          this.rowContent = this.rowContent.map(v => {
            this.$set(v, "temp_edit", false);
            return v;
          });
          this.listLoading = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    fetchGroupData() {
      getAllByCompanyGuid().then(res => {
        if (res.code === 100) {
          this.allGroups = res.body;
          this.allGroups = this.allGroups.map(v => {
            return { ...v, type: "" };
          });
          console.log("allgoups", this.allGroups);
        }
      });
    },
    getGroup() {
      selectByGroupGuid(this.listQuery).then(res => {
        if (res.code === 100) {
          this.list = res.body;
          this.rowContent = res.body.rows;
          this.total = res.body.total;
        }
      });
    },
    //添加自定义标题 弹出框保存按钮事件
    addTitle() {
      // this.TitleForm.domains = {};
      // 下拉框类型 titleForm值
      console.log(this.TitleForm.domains);
      this.$refs["titleForm"].validate(valid => {
        if (valid) {
          if (this.TitleForm.rowType != 4) {
            delete this.TitleForm.domains;
          }
          addField(this.TitleForm)
            .then(response => {
              this.fetchData();
              this.dialogTitleVisible = false;
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改自定义标题 弹出框保存按钮事件
    editTitle() {
      console.log(this.TitleForm.text_length);
      if (this.TitleForm.text_length != 50) {
        let editParmas = {
          line_uuid: this.TitleForm.field,
          text_length: this.TitleForm.text_length
        };
        updateTextLength(editParmas)
          .then(response => {
            this.fetchData();
            this.dialogTitleVisible = false;
          })
          .catch(error => {
            console.log(error);
          });
      }
      let editParmas = [this.TitleForm.field, this.TitleForm.title];
      console.log(editParmas);
      updateFieldName(editParmas)
        .then(response => {
          this.fetchData();
          this.dialogTitleVisible = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //修改下拉项值事件
    updateOptionsValue() {
      console.log(this.TitleForm);
      //field domains
      let editParmas = {
        line_uuid: this.TitleForm.field,
        domains: this.TitleForm.domains
      };
      updateSelect(editParmas)
        .then(response => {
          this.fetchData();
          this.dialogTitleVisible = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //删除自定义列接口
    delField() {
      delField(this.columnField)
        .then(response => {
          this.fetchData();
        })
        .catch(error => {});
    },
    handleFilter() {
      // this.listQuery.query
      this.listQuery.page = 1;
      this.fetchData();
    },
    //自定义标题
    renderHeader(h, { column, $index }) {
      return (
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right" />
            {column.label}
          </span>
          <el-dropdown-menu style="width:150px;" slot="dropdown">
            <el-input />
            <el-dropdown-item>
              <i
                class="el-icon-delete"
                onClick={() => this.delColumnField($index, column.label)}
              >
                删除列
              </i>
            </el-dropdown-item>
            <el-dropdown-item>
              <i
                class="el-icon-edit"
                onClick={() => this.editColumnField($index, column)}
              >
                修改列名
              </i>
            </el-dropdown-item>
            <el-dropdown-item>
              <i
                // v-show="this.dynTitle[$index-9].type==='4'"
                class="el-icon-edit"
                onClick={() => this.updateOptions($index, column)}
              >
                修改下拉项值
              </i>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      );
    },
    //删除自定义列 弹窗
    delColumnField(i, title) {
      i = i - 13;
      this.columnField = this.dynTitle[i].field;
      console.log(this.dynTitle[i].field);
      this.columnLabel = title;
      MessageBox.confirm("确定删除列名为 " + title + " 吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delField(this.columnField).then(response => {
            this.fetchData();
          });
        })
        .catch(e => e);
    },
    //编辑自定义列名 弹窗
    editColumnField(i, column) {
      console.log("列号", i);
      i = i - 13;
      this.InputLengthVisible = false;
      this.showSelect = false;
      this.dialogTitleVisible = true;
      this.TitleForm = this.dynTitle[i];
      if (this.TitleForm.rowType === 1) {
        this.InputLengthVisible = true;
      }
      this.TitleForm.rowType = String(this.TitleForm.rowType); //下拉框正常显示
      this.TitleForm.roomType = String(this.TitleForm.roomType);
      this.dialogStatus = "update";
      this.InputDisabled = true;
    },
    //修改下拉框值 弹窗
    updateOptions(i, column) {
      i = i - 13;
      console.log(this.dynTitle[i].rowType);
      this.dialogTitleVisible = true;
      this.TitleForm = this.dynTitle[i];
      this.TitleForm.rowType = String(this.TitleForm.rowType);
      if (this.dynTitle[i].rowType === "4") {
        this.showSelect = true;
      }
      this.InputDisabled = true;
      this.dialogStatus = "updateOptions";
    },
    //添加行事件
    handleCreate() {
      //往数组添加一个空对象
      // this.rowContent.push({ edit: true, addButton: true });
      this.rowContent.unshift({ temp_edit: true, temp_addButton: true });
    },
    //打开添加列弹出框
    handleColumn() {
      console.log(this.TitleForm);
      this.initData(); //数据初始化
      this.dialogTitleVisible = true;
      this.dialogStatus = "create";
      this.InputDisabled = false;
    },
    handleCancel() {
      this.dialogTitleVisible = false;
      this.fetchData();
    },
    handleRentDialog() {
      //出租弹出框
      if (this.selectionData.length > 0) {
        this.rentDialogVisible = true;
        this.dialogTitle = "出租";
        store.dispatch("SetUpload", 1);
      } else {
        this.assetMessageWarn();
      }
    },
    assetMessageWarn() {
      this.$message({
        message: "请先选中资产!",
        type: "warning"
      });
    },
    //导出excel
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const dVal = [];
        const fVal = [];
        const dTitle = [];
        const fTitle = [];
        //解构对象
        this.dynTitle.forEach(element => {
          const { field, title } = element;
          dVal.push(field);
          dTitle.push(title);
        });
        this.fixedTitle.forEach(element => {
          const { field, title } = element;
          fVal.push(field);
          fTitle.push(title);
        });
        const tHeader = [...fTitle, ...dTitle];
        const filterVal = [...fVal, ...dVal];
        console.log("filterVal", filterVal);
        const data = this.formatJson(filterVal, this.rowContent);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "资产表"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    //保存修改
    saveRowEvent(row) {
      console.log(row);
      row.temp_edit = false;
      // this.$refs["scope.row"].validate((valid, model) => {
      //   console.log(valid);
      //   //通过验证
      //   if (valid) {
      //   } else {
      //   }
      //   console.log(model);
      // });
      if (row.temp_addButton) {
        //添加行
        insertRowValue(row)
          .then(response => {
            this.fetchData();
            console.log(response);
          })
          .catch(error => {});
      } else {
        //修改行
        updateRowValue(row)
          .then(response => {
            row.temp_edit = !temp_edit;
            this.fetchData();
          })
          .catch(error => {});
      }
    },
    // 取消处理
    cancelRowEvent(index, row) {
      console.log(index);
      // row[item.field] = row.originalTitle
      //新增加一行时
      if (row.temp_addButton) {
        this.rowContent.splice(index, 1);
      } else {
        row.temp_edit = false;
      }
    },
    //删除一行
    removeRowEvent(row) {
      this.rowGuid.splice(null);
      this.rowGuid.push(row.guid);
      console.log(this.rowGuid);
      MessageBox.confirm("确定删除当前行吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delRowValue(this.rowGuid).then(response => {
            this.fetchData();
          });
        })
        .catch(e => e);
    },
    //多行删除
    delSelectionRow() {
      this.rowGuid.splice(null);
      let chooseRow = this.$refs.multipletable.selection;
      if (chooseRow.length > 0) {
        for (let index = 0; index < chooseRow.length; index++) {
          this.rowGuid.push(chooseRow[index].guid);
        }
        MessageBox.confirm("确定删除选中行数据吗?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            delRowValue(this.rowGuid).then(response => {
              this.fetchData();
            });
          })
          .catch(e => e);
      } else {
        this.$message({
          message: "请选择需要删除的数据!",
          type: "error"
        });
      }
    },
    //下拉框值发生改变时
    selectChange(value) {
      console.log(value);
      // this.TitleForm.type = value;
      if (value === "4") {
        this.showSelect = true;
      } else {
        this.showSelect = false;
      }
    },
    initData() {
      //数据初始化
      this.TitleForm = {
        title: "",
        columnIndex: 0,
        rowType: "",
        roomType: "",
        domains: []
      };
    },
    removeDomain(item) {
      //移除下拉框
      var index = this.TitleForm.domains.indexOf(item);
      if (index !== -1) {
        this.TitleForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      //添加下拉框
      this.TitleForm.domains.push({
        value: ""
      });
      console.log(this.TitleForm.domains);
    },
    //表格选中事件
    handleChange(val) {
      this.selectionGuid = [];
      let guid = [];
      if (val.length > 0) {
        this.selectionData = val;
        this.assetData = val;
        val.forEach(element => {
          guid.push(element.guid);
        });
        // for (let index = 0; index < this.selectionData.length; index++) {
        //   guid.push(this.selectionData[index].guid);
        // }
        this.selectionGuid = guid;
        console.log("selectionGuid-----------", this.selectionGuid);
        this.selectionRoomData = val;
      }
    },
    handleUpload() {
      if (this.selectionData.length > 0) {
        //当选中资产
        this.dialogScreenVisible = true;
        store.dispatch("SetUpload", 0);
      } else {
        this.assetMessageWarn();
      }
    },
    handleDetail(guid) {
      this.$router.push({ name: "assetDetail", query: { guid: guid } });
    },
    handleScreen() {
      this.dialogScreenVisible = true;
    },
    handleBooked() {
      // this.selectionRoomData = [];
      //入账弹出框
      if (this.selectionData.length > 0) {
        this.bookedDialogVisible = true;
        this.bookedDialogTitle = "资产入账";
        store.dispatch("SetUpload", 0);
      } else {
        this.assetMessageWarn();
      }
    },
    handleOutBooked() {
      //出账弹出框
      if (this.selectionData.length > 0) {
        this.bookedDialogVisible = true;
        this.bookedDialogTitle = "资产出账";
        store.dispatch("SetUpload", 0);
      } else {
        this.assetMessageWarn();
      }
    },
    // 续租
    notarizeRelet() {
      if (this.selectionData.length > 0) {
        this.rentDialogVisible = true;
        this.dialogTitle = "续租";
        // this.chartInfoParams["guid"] = this.selectionGuid[0];
        // getChartInfoRoom(this.chartInfoParams).then(response => {
        //   this.reletData = response.body.rows[0];
        // });
        // this.isHireRelet = true;
      } else {
        this.assetMessageWarn();
      }
    },
    closeDialog(close) {
      console.log(close);
      this.bookedDialogVisible = close;
    },
    //行右键事件
    rowContextMenu(row, column, event) {
      // console.log(row, column, event);
      console.log("行guid", row.guid);
    },
    handleSubmenuShow() {
      console.log(vm, placement);
    },
    //删除tag事件
    handleTagClose(tag) {
      console.log("tag", tag);
      MessageBox.confirm("确定删除分组 " + tag.name + " 吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = { groupGuid: tag.guid };
          deleteByGroupGuid(data).then(res => {
            if (res.code === 100) {
              this.$message({ type: "success", message: "删除分组成功!" });
              this.fetchGroupData();
            }
          });
        })
        .catch(e => e);
    },
    //tag点击事件
    handleTagClick(tag) {
      console.log("tag", tag);
      this.contextItemShow = true;
      this.listQuery.groupGuid = tag.guid;
      if (tag.type === "") {
        tag.type = "success";
      } else {
        tag.type = "";
      }
      this.getGroup();
    },
    //添加进分组
    addGroup() {
      this.$prompt("请输入分组名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          let data = { name: value };
          addGroup(data).then(res => {
            if (res.code === 100) {
              this.$message({ type: "success", message: "添加新分组成功!" });
              this.fetchGroupData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    //分组点击时
    handleItemGroup(item) {
      let data = { roomGuids: this.selectionGuid, groupGuid: item.guid };
      addRoomGroup(data).then(res => {
        if (res.code === 100) {
          this.$message({ message: "添加分组成功!", type: "success" });
          this.fetchGroupData();
        }
      });
    },
    //取消收藏
    cancelCollection() {
      console.log("cancel");
      let data = {
        roomGuids: this.selectionGuid,
        groupGuid: this.listQuery.groupGuid
      };
      delRoomGroup(data).then(res => {
        if (res.code === 100) {
          this.$message({ message: "移除成功!", type: "success" });
          this.fetchGroupData();
        }
      });
    }
  }
};
</script>
<style>
.filter-container {
  padding-bottom: 10px;
}
.filter-container .filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}
.link-type:focus:hover,
.link-type:hover {
  color: #20a0ff;
}
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;
}
.del-icon {
  margin-left: 5px;
  font-size: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.btn-del {
  margin-top: 18px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>

